<template>
  <div class="app-container">
    <!-- 导航栏 -->
    <el-card style="margin-bottom: 16px" shadow="always" :body-style="{ padding: '0' }">
      <div style="display: flex; line-height: 30px">
        <h1
          v-for="(item, index) in navItems"
          :key="index"
          :class="{ DynamicCondition: isActive === index, spacing: index > 0 }"
          @click="clickToSwitch(index)"
          style="font-size: 11px; cursor: pointer"
        >
          {{ item }}
        </h1>
      </div>
    </el-card>
    <!-- 用户部门定义 -->
    <div v-show="isActive === 1" class="ProductionDynamic">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div style="display: flex">
          <div style="width: 10%">
            <h1>成型线别用户</h1>
            <!-- <Table :tableHeader="tableHeader" :tableData="tableData" :TableHeight="500"  /> -->
            <Table :tableHeader="tableHeader2" :tableData="tableData" :TableHeight="500" />
          </div>
        </div>
        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>

    <!-- 冲裁工序定义 -->
    <div v-show="isActive === 0">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div style="display: flex">
          <div style="width: 10%">
            <h1>工序资料</h1>
            <!-- <Table :tableHeader="tableHeader" :tableData="tableData" :TableHeight="500"  /> -->
            <Table :tableHeader="tableHeader" :tableData="tableData" :TableHeight="500" />
          </div>
          <div style="width: 20%; margin-left: 10px">
            <h1>工艺资料</h1>
            <Table :tableHeader="tableHeader1" :tableData="tableData" :TableHeight="500" />
          </div>
        </div>
        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>

    <!-- 计划安排部门定义 -->
    <div v-show="isActive === 2">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div style="width: 15%">
          <h1>计划安排部门</h1>
          <Table :tableHeader="tableHeader3" :tableData="tableData" :TableHeight="500" />
        </div>
        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>

    <!-- 领料部门定义 -->
    <div v-show="isActive === 3">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div style="width: 15%">
          <h1>领料部门定义</h1>
          <Table :tableHeader="tableHeader5" :tableData="tableData" :TableHeight="500" />
        </div>
        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>

    <!-- 配套仓发料部门 -->
    <div v-show="isActive === 4">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div style="width: 15%">
          <h1>配套仓发料部门定义</h1>
          <Table :tableHeader="tableHeader6" :tableData="tableData" :TableHeight="500" />
        </div>
        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ProductionBasicDataDefinition'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
// 导航栏
const navItems = ref(['冲裁工序定义', '用户部门定义', '计划安排部门定义', '领料部门定义', '配套仓发料部门'])

// 导航栏状态
const isActive = ref(0)

//点击切换
const clickToSwitch = (index: number) => {
  isActive.value = index
}

// 表格数据
const tableData = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader = ref([
  {
    label: '工序代码',
    prop: 'slipNo'
  },
  {
    label: '工序名称',
    prop: 'slipDate'
  }
])

const tableData1 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader1 = ref([
  {
    label: '序号',
    prop: 'slipNo'
  },
  {
    label: '工艺',
    prop: 'slipDate'
  },
  {
    label: 'CT(秒)',
    prop: 'slipDate'
  }
])

const tableHeader2 = ref([
  {
    label: '成型线别',
    type: 'select',
    prop: 'name'
  },
  {
    label: '用户名称',
    prop: 'slipNo'
  }
])

const tableHeader3 = ref([
  {
    label: '制程',
    type: 'select',
    prop: 'name'
  },
  {
    label: '序号',
    prop: 'slipDate'
  },
  {
    label: '安排部门',
    prop: 'slipDate'
  }
])

const tableHeader5 = ref([
  {
    label: '序号',
    prop: 'slipNo',
    width: '55'
  },
  {
    label: '领用部门',
    prop: 'slipDate'
  }
])

const tableHeader6 = ref([
  {
    label: '部门代码',
    prop: 'slipNo'
  },
  {
    label: '部门名称',
    prop: 'slipDate'
  }
])
</script>

<style lang="less" scoped>
.H1Size {
  font-size: 16px;
}

.bottom {
  float: right;
}

.DynamicCondition {
  color: #f89027;
  border-bottom: 2px solid #f89027;
}

.spacing {
  margin-left: 10px;
  /* 根据需要调整间距大小 */
}

h1 {
  font-size: 16px;
}
</style>
